<!--
@description：个人信息
@author: whw
@date: 2021/6/24
-->
<template>
  <div class="main">
    <el-form ref="form" v-loading="loading" :model="formData" label-width="80px" style="width: 20%">
      <el-row>
        <el-col :span="24">
          <el-form-item label="头像:">
            <el-upload
              ref="avatarUpload"
              class="avatar-uploader"
              action="http://localhost:32011/user/saveAvatar"
              :headers="headers"
              accept="image/png, image/jpeg"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageSrc" :src="imageSrc" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="姓名:" prop="nickname">
            <el-input v-model="formData.nickname" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="submit()">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getSimpleInfo, save } from '@/api/user'

export default {
  name: 'UserInfo',
  data() {
    return {
      loading: true,
      headers: {
        token: null
      },
      imageSrc: null,
      formData: {
        nickname: null,
        avatar: null
      }
    }
  },
  mounted() {
    this.getSimpleInfo()
    this.setHeaderToken()
  },
  methods: {
    setHeaderToken() {
      this.headers.token = getToken()
    },
    handleChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
        return
      }

      this.imageSrc = URL.createObjectURL(file.raw)
    },
    handleAvatarSuccess(res, file) {
      if (res.code !== 200) {
        this.$notify({
          title: '成功',
          message: '头像保存失败',
          type: 'error'
        })
      }
    },
    // 获取用户信息
    getSimpleInfo() {
      getSimpleInfo().then(res => {
        if (res.code === 200) {
          const { data } = res
          if (data.avatar) {
            this.imageSrc = 'data:image/jpeg;base64,' + data.avatar
          }
          Object.assign(this.formData, res.data)
          this.loading = false
        }
      })
    },
    // 保存信息
    submit() {
      this.loading = true

      // 保存头像
      this.$refs.avatarUpload.submit()

      const params = this.formData
      // 保存信息
      save(params).then(res => {
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
        })
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  padding: 10px;

  /deep/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
